<template>
  <div>
    <div id="left2"></div>
  </div>
</template>

<script>
import { Column } from '@antv/g2plot';
export default {
  data(){
    return {
      data : [
        { type: '广州', value: 0.22 },
        { type: '东莞', value: 0.18 },
        { type: '南宁', value: 0.18 },
        { type: '佛山', value: 0.15 },
        { type: '柳州', value: 0.08 },
        { type: '上海', value: 0.05 },
        { type: '惠州', value: 0.04 },
        { type: '海口', value: 0.01 },
        { type: '其他', value: 0.09 }
      ]
    }
  },
  methods:{
    myAntv(){
      const paletteSemanticRed = '#F4664A';
      const columnPlot = new Column('left2', {
        data:this.data,
        xField: 'type',
        yField: 'value',
        seriesField: '',
        color: paletteSemanticRed,
        label: {
          content: (originData) => {
            const val = parseFloat(originData.value);
            if (val < 0.05) {
              return (val * 100).toFixed(1) + '%';
            }
          },
          offset: 10,
        },
        legend: false,
        xAxis: {
          label: {
            autoHide: true,
            autoRotate: false,
          },
        },
      });

      columnPlot.render();
    }
  },
  created(){

  },
  mounted(){
    this.myAntv();
  }
}
</script>
<style lang="scss" scoped>
#left2{
  // width: 300px;
  height: 200px;
}
</style>